import React from 'react'
import { connect } from 'dva'
import { Form ,Modal,message} from 'antd'
import { hashHistory } from 'dva/router'
import { mapStateToProps } from 'utils/view_utils'
import styles from './commissionsDistRulesStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import classnames from 'classnames/bind';
import FlagBtn from 'widget/FlagBtn/FlagView'
import config from 'config/config'
const confirm = Modal.confirm;
let cx=classnames.bind(styles);


const commissionsDistRulesView = function({dispatch, model, form}) {
  // 表单的子函数
  // const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  // modelObj.xxx获取model中状态机的值
  let {backLoading,submitLoading,biz,id,rulesName} = modelObj

  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      // api_url: `${config.hktServer1}admin/commissionRule/list`,
      // api_url: `admin/commissionRule/list`,
      api_url: `admin/commissionRule/allList`,
      // 接口方式
      method: "POST",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        pageSize:'10',
        pageNo:'1'
        },
        
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'projectName',
            zh_name: '项目名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'name',
            zh_name: '规则方案名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'submiTime',
            zh_name: '提交日期',
            elem_type: 'Date',
            format: 'YYYY-MM-DD',
            // query_format: "YYYY-MM-DD HH:mm:ss",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
            // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
            split_keys: ['dmaketimeEnd', 'dmaketimeStrart'],
            elem_valid_type: 'string'
          },
        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 是否生效 项目名称  佣金方案名称 方案生效日期 方案失效日期 审批人 审批通过日期   提交人 提交日期  创建人 创建日期
      table:
        {
          rowSelectionInfo: {
            type: 'radio',
          },
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 2800},
          fields: [
            {
              en_name: "ruleNo",
              zh_name: "序号",
              width: 60,
              render: (a, item, index, d, e, f) => {
                return index+1
              },
            },
            {
              en_name: "buyStatus",
              zh_name: "是否生效",
              render:(a, item, index, d, e, f)=>{
                if(item.buyStatus == 0){
                  return '否'
                }else if(item.buyStatus == 1){
                  return '是'
                }
              }
            },
            {
              en_name: "flowState",
              zh_name: "流程状态",
              render:(a, item, index, d, e, f)=>{
                if(item.flowState === 0){
                  return '未提交'
                }else if(item.flowState == 1){
                  return '已审批'
                }else if(item.flowState == 2){
                  return '审批中'
                }else if(item.flowState == 3){
                  return '作废'
                }
              }
            },
            {
              en_name: "projectName",
              zh_name: "项目名称",
            },
            {
              en_name: "name",
              zh_name: "佣金方案名称",
            },
            {
              en_name: "version",
              zh_name: "版本号",
              render:(a, item, index, d, e, f)=>{
                  return 'V'+ item.version
              }
            },
            {
              en_name: "startTime",
              zh_name: "方案生效日期",
              render:(a, item, index, d, e, f)=>{
                return item.startTime.substring(0,10)
            }
            },
            {
              en_name: "endTime",
              zh_name: "方案失效日期",
              render:(a, item, index, d, e, f)=>{
                return item.endTime.substring(0,10)
            }
            },
            {
              en_name: "approverByName",
              zh_name: "审批人",
            },
            {
              en_name: "approverTime",
              zh_name: "审批通过日期",
            },
            {
              en_name: "submitByName",
              zh_name: "提交人",
            },
            {
              en_name: "submitTime",
              zh_name: "提交日期",
            },
            {
              en_name: "createByName",
              zh_name: "创建人",
            },
            {
              en_name: "createTime",
              zh_name: "创建日期",
            },
            {
              en_name: "edit",
              zh_name: "操作",
              width:160,
              fixed:'right',
              render: (a, item, index, d, e, f) => {
                return (
                  <span>
                        <FlagBtn node={<a onClick={() => addOrEditSkip('check',item)}>查看<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                        <FlagBtn node={<a onClick={() => addOrEditSkip('edit',item)}>编辑<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                        <FlagBtn node={<a onClick={() => addOrEditSkip('upVersion',item)}>变更方案<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                        <FlagBtn node={<a onClick={() => deleteContent(item.id)}>作废</a>} btnId={''}> </FlagBtn>
                    </span>
                )
              },
            }
          ]
        },
      // 操作栏
      action_bar: [
        {
          label: "录入",
          type: "primary",
          onClick: (e,row) =>{
            hashHistory.push({
              pathname: '/home/commissions/commissionsDistRulesDetail',
              query: {}
            });
          }
        },
        {
          label: '导出',
          type: 'primary',
          onClick: (e, row) => {
            if(row.length<=0){
              message.warn('请选择一项你要选择的方案')
              return
            }
            id = row[0].id
            rulesName = row[0].name
            baseFun(id,'down',rulesName)
          }
        },
        {
          label: "提交审批",
          type: "primary",
          rowSelection:[],
          loading: submitLoading,
          onClick: (e,row) =>{
            if(row.length<=0){
              message.warn('请选择一项你要选择的方案')
              return
            }
            if(row[0].flowState !==0){
              message.warn('只有未提交的方案才能提交审批')
              return
            }
            id = row[0].id
            baseFun(id,'submit')
          }
        },
        {
          label: "查看流程详情",
          type: "primary",
          rowSelection:[],
          onClick: (e,row) =>{
            if(row.length<=0){
              message.warn('请选择一项你要选择的方案')
              return
            }
            if(!row[0].c3ProcessId){
              message.warn('没有相应的流程不能查看')
              return false
            }
            id = row[0].c3ProcessId
            baseFun(id,'check')
          }
        },
        {
          label: "撤回",
          type: "primary",
          loading: backLoading,
          rowSelection:[],
          onClick: (e,row) =>{
            if(row.length<=0){
              message.warn('请选择一项你要选择的方案')
              return
            }
            if(!row[0].c3ProcessId){
              message.warn('没有相应的流程不能撤回')
              return false
            }
            id = row[0].id
            confirm({
              title: '撤回确认',
              content: '是否确定撤回？',
              okText: '确认',
              okType: 'primary',
              cancelText: '取消',
              onOk() {
                baseFun(id,'recall')
              },
              onCancel() {
                console.log('Cancel');
              },
            });
            // baseFun(id,'recall')
          }
        },
        {
          label: "复制方案",
          type: "primary",
          rowSelection:[],
          onClick: (e,row) =>{
            // 自定义点击事件，第二个参数rows为当rowSelection: '1'时，返回选中行的数据数组
            if(row.length<=0){
                message.warn('请选择一项你要选择的方案')
                return
            }
            id = row[0].id
            rulesName = row[0].name
            baseFun(id,'copeContent',rulesName)
          }
        },
      ]
    },
  }

  // 查看及编辑跳转
  function addOrEditSkip(type,item){
    if(type == 'upVersion'){
      if(item.flowState == 1&&item.noCommission !=1){
        hashHistory.push({
          pathname: '/home/commissions/commissionsDistRulesVersion',
          query: {actionType: type, id:item.id }
        })
      }else{
        message.warn('只有审批通过且不是特例规则才能变更方案')
      }
    }else if(type == 'check'||(type == 'edit' && item.flowState === 0)){
      hashHistory.push({
        pathname: '/home/commissions/commissionsDistRulesDetail',
        query: {actionType: type, id:item.id }
      })
    }else{
      message.warn('只有未提交的方案才能编辑')
    }
  }
  //规则作废
  function deleteContent(val){
    id = val
    confirm({
      title: '作废确认',
      content: '您真的要作废此条规则信息吗?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        baseFun(id,'deleteContent')
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  function baseFun(id,type,rulesName){
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { id , rulesName}
    })
    dispatch({
      type: `${namespace}/${type}`,
      payload: {}
    })
  }

  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }

  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps}/>
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(commissionsDistRulesView))
